<template>
    <div>
        <!-- 设置一个容器合适大小 -->
        <div id="two" style="width: 100vw;height:100vh;"></div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            twolist: {
                xAxisdata: [],
                seriesData: []
            },
        }
    },
    methods: {
        //初始化容器
        initEcharts() {
            const myChart = this.$echarts.init(document.getElementById('two'));
            myChart.setOption({
                title: { text: '全国种植每月收入情况' },
                tooltip: {},
                xAxis: {
                    data: this.twolist.xAxisdata
                },
                yAxis: {
                    // type: 'category',
                },
                series: [{
                    name: '数量',
                    showBackground: true,
                    type: 'bar', //柱状图
                    // data: [5, 20, 36, 10, 10, 20]
                    data: this.twolist.seriesData,
                    itemStyle: {
                        color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: '#33b4da' },   // 渐变起始颜色
                            { offset: 1, color: '#10395d' },
                        ]),
                        barBorderRadius: [50, 50, 0, 0],// 设置上右下左四个角的圆角半径，数组顺序为上右下左
                    },
                    
                    label: {
                        show: true,
                        position: 'top',
                        formatter: '{c}棵'
                    }
                }]
            });
            // console.log(this.xAxisData);
        },
        gettwo() {
            this.$http('/api/plantingHarvest', 'get').then(res => {
                console.log(res);
                this.twolist.xAxisdata = res.map(item => { return item.month })
                this.twolist.seriesData = res.map(item => { return item.harvest })
                this.initEcharts()
            }).catch(err => {
                console.log(err)
            })
        },
    },
    mounted() {
        this.gettwo()

    }
}
</script>

<style lang="less" scoped></style>